const {resolve, join} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const PurgecssPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');
const PATHS = {src: join(__dirname, 'src')};
const srcPaths = glob.sync(`${PATHS.src}/**/*`, {nodir: true});
// console.log(srcPaths);
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    entry: ["./src/index.js"],

    output: {
        filename: "[name].js",
        path: resolve(__dirname, 'build')
    },

    //打包非js文件以外的资源
    module: {
        rules: [
            /*
                        {test: /\.css$/, use: ['style-loader', 'css-loader']},
                        {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
                        {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']}
            */
            {test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']},
            {test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader', 'postcss-loader']},
            {test: /\.scss$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', 'postcss-loader']},
            {
                test: /\.(png|jpg|jpeg|gif)/,
                loader: 'url-loader',
                options: {
                    publicPath: './images/',
                    outputPath: 'images/',
                    limit: 1024 * 20,
                    name: '[name][hash:10].[ext]'
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                exclude: /\.(js|json|html|css|less|scss|png|gif|png|jpeg)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'font/',
                    publicPath: './font',
                    name: '[name][hash:8].[ext]'
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
                options: {
                    fix: true
                }
            }
        ]
    },

    optimization: {
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    output: {
                        comments: false,
                    },
                },
            }),
        ],
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",
        }),

        new MiniCssExtractPlugin({
            filename: "[name].css"
        }),

        //优化css合并压缩之类的
        new OptimizeCssAssetsWebpackPlugin(),

        //优化css删除无用的样式
        new PurgecssPlugin({
            paths: srcPaths,
        }),

    ],

    target: "web",

    // mode: "development"

    devServer: {
        port: 3000,
        compress: true,
        open: true,
        hot: true
    },


};